<!--
 * @Descripttion: 首页
 * @version: 1.0.0
 * @Author: QYFeng
 * @Date: 2021-04-19 22:28:37
 * @LastEditors: QYFeng
 * @LastEditTime: 2021-04-19 22:58:28
-->
<template>
  <div class="main">
    <!-- banner -->
    <div class="head-banner">
      <img src="../assets/images/index-banner.png" alt="" srcset="" />
      <!-- 导航 -->
      <div class="nav-wrap">
        <router-link class="item" to="./staffSearch">
          <img src="../assets/images/ygcx.png" alt="员工查询" srcset="" />
          <p>员工查询</p>
        </router-link>
        <router-link class="item" to="./wordOrder">
          <img src="../assets/images/gddj.png" alt="工单递交" srcset="" />
          <p>工单递交</p>
        </router-link>
        <router-link class="item" to="./homeVisits">
          <img src="../assets/images/smbf.png" alt="上门拜访" srcset="" />
          <p>上门拜访</p>
        </router-link>
      </div>
    </div>

    <!-- 公司简介 -->
    <div class="company-profile">
      <div class="center">
        <div class="head">
          <h1>公司简介</h1>
          <span>COMPANY PROFILE</span>
        </div>
        <div class="body">
          <div class="lf">
            <div class="cont">
              <p v-html="companyProfileData.content"></p>
            </div>
            <router-link class="btn" to="./companyProfile"
              >了解更多</router-link
            >
          </div>
          <div class="rt">
            <div class="div"></div>
            <img :src="companyProfileData.image" alt="" />
          </div>
        </div>
      </div>
    </div>
    <!-- 公司业务 -->
    <div class="corporate-business">
      <div class="center">
        <div class="head">
          <h1>公司业务</h1>
          <span>COMPANY BUSINESS</span>
        </div>
        <div class="body">
          <router-link
            class="item"
            :to="{ name: 'corporateBusinessDetail', query: { id: item.id } }"
            v-for="(item, index) in serviceData.slice(0, 4)"
            :key="index"
          >
            <div class="img">
              <img :src="item.image" alt="" srcset="" />
            </div>
            <div class="title-wrap">
              <div class="num">0{{ index + 1 }}</div>
              <div class="title">{{ item.title }}</div>
              <img
                class="jiantou"
                src="../assets/images/index-jiantou.png"
                alt=""
                srcset=""
              />
            </div>
          </router-link>
        </div>
      </div>
    </div>
    <!-- 简讯 -->
    <div class="contact-us">
      <div class="center">
        <div class="head">
          <h1>简讯</h1>
          <span>NEWS IN BRIEF</span>
        </div>
        <div class="body">
          <router-link
            :to="{ name: 'briefDetail', query: { id: item.id } }"
            class="item"
            v-for="(item, index) in newsData.slice(0,6)"
            :key="index"
          >
            <div class="lf">
              <div class="b">{{item.create_time[1]}}/{{item.create_time[2]}}</div>
              <div class="s">{{item.create_time[0]}}</div>
            </div>
            <div class="rt">
              <div class="title">{{item.title}}</div>
              <div class="cont" v-html="item.content"></div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
    <!-- 行政许可 -->
    <div class="administrative-license">
      <div class="center">
        <div class="head">
          <h1>行政许可</h1>
          <span>ADMINISTRATIVE LICENSE</span>
        </div>
        <div class="body">
          <img
            v-for="(item,index) in licenseData.slice(0,4)"
            :key="index"
            :src="item.image"
            alt=""
            srcset=""
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      companyProfileData: [], // 公司简介
      serviceData: [], // 公司业务
      newsData: [], // 简讯
      licenseData: [] // 行政许可
    }
  },
  created () {
    // 公司简介
    this.$http.getCompanyProfile().then((res) => {
      if (res.data.code === 0) {
        this.companyProfileData = res.data.data
      } else {
        this.$message.error('请求失败，请重试！')
      }
    })
    // 公司业务
    this.$http.getService().then((res) => {
      if (res.data.code === 0) {
        this.serviceData = res.data.data
      } else {
        this.$message.error('请求失败，请重试！')
      }
    })
    // 简讯
    this.$http.getNews().then((res) => {
      if (res.data.code === 0) {
        const data = res.data.data
        data.map((item) => {
          item.create_time = item.create_time.replace(' ', ':').replace(/:/g, '-').split('-')
        })
        this.newsData = res.data.data
      } else {
        this.$message.error('请求失败，请重试！')
      }
    })
    // 行政许可
    this.$http.getLicense().then((res) => {
      if (res.data.code === 0) {
        this.licenseData = res.data.data
      } else {
        this.$message.error('请求失败，请重试！')
      }
    })
  },
  methods: {

  }
}
</script>
<style lang="scss" scoped>
.head-banner {
  height: 700px;
  img {
    width: 100%;
    height: 100%;
  }
}
.nav-wrap {
  width: 1200px;
  height: 240px;
  background: #f5f5f5;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  opacity: 1;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  margin-top: -150px;
  z-index: 10;
  position: relative;
  text-align: center;
  .item {
    margin-right: 228px;
    img {
      width: 114px;
      height: 114px;
    }
    p {
      font-size: 24px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #536786;
      margin-top: 34px;
    }
  }
  .item:last-child {
    margin-right: 0;
  }
}
.company-profile {
  height: 900px;
  background-image: url("../assets/images/index-bg.png");
  background-size: 100% 100%;
  background-color: #fff;
  padding-top: 170px;
  .center {
    width: 1200px;
    margin: 0 auto;
    .head {
      display: flex;
      align-items: flex-end;
      h1 {
        font-size: 48px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #536786;
      }
      span {
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #536786;
      }
    }
    .body {
      padding-top: 40px;
      display: flex;
      position: relative;
      .lf {
        .cont {
          width: 517px;
          height: 343px;
          font-size: 20px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 28px;
          color: #536786;
          opacity: 0.8;
          p {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 12;
            overflow: hidden;
          }
        }
        .btn {
          display: inline-block;
          width: 300px;
          height: 80px;
          text-align: center;
          line-height: 80px;
          border: 2px solid #536786;
          color: #536786;
          font-size: 30px;
          margin-top: 112px;
          cursor: pointer;
        }
      }
      .rt {
        .div {
          width: 360px;
          height: 495px;
          background: #536786;
          opacity: 0.5;
          position: absolute;
          right: 0px;
          top: 40px;
        }
        img {
          width: 495px;
          height: 495px;
          position: absolute;
          right: 40px;
          top: 0px;
          z-index: 5;
        }
      }
    }
  }
}
.corporate-business {
  height: 800px;
  background-image: url("../assets/images/index-bg.png");
  background-size: 100% 100%;
  background-color: #536786;
  padding-top: 80px;
  color: #fff;
  .center {
    width: 1200px;
    margin: 0 auto;
    .head {
      text-align: center;
      h1 {
        font-size: 48px;
        font-family: PingFang SC;
        font-weight: bold;
      }
      span {
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: bold;
      }
    }
    .body {
      display: flex;
      justify-content: space-between;
      padding-top: 40px;
      .item {
        width: 280px;
        cursor: pointer;
        color: #fff;
        .img {
          width: 280px;
          height: 360px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .title-wrap {
          position: relative;
          height: 70px;
          .num {
            font-size: 60px;
            font-family: PingFang SC;
            font-weight: bold;
            opacity: 0.2;
            position: absolute;
            left: 0;
            top: -20px;
          }
          .title {
            font-size: 36px;
            font-family: PingFang SC;
            font-weight: bold;
            position: absolute;
            left: 0;
            bottom: 0px;
            z-index: 5;
            width: 220px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .jiantou {
            width: 70.93px;
            height: 28.28px;
            position: absolute;
            right: 0;
            bottom: 0px;
            z-index: 5;
          }
        }
      }
      .item:nth-child(2n) {
        .img {
          margin-top: 46px;
        }
      }
      .item:nth-child(2n-1) {
        .title-wrap {
          margin-top: 38px;
        }
      }
    }
  }
}

.contact-us {
  height: 800px;
  background-image: url("../assets/images/index-bg.png");
  background-size: 100% 100%;
  background-color: #fff;
  padding-top: 80px;
  color: #536786;
  .center {
    width: 1200px;
    margin: 0 auto;
    .head {
      text-align: center;
      h1 {
        font-size: 48px;
        font-family: PingFang SC;
        font-weight: bold;
      }
      span {
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: bold;
      }
    }
    .body {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding-top: 40px;
      .item {
        width: 510px;
        display: flex;
        margin-bottom: 74px;
        .lf {
          width: 104px;
          margin-right: 20px;
          .b {
            font-size: 36px;
            font-family: PingFang SC;
            font-weight: bold;
          }
          .s {
            font-size: 20px;
            font-family: PingFang SC;
            font-weight: bold;
          }
        }
        .rt {
          width: 386px;
          .title {
            font-size: 20px;
            font-family: PingFang SC;
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 40px;
          }
          .cont {
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 30px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
        }
      }
    }
  }
}
.administrative-license {
  height: 500px;
  background-color: #c4d0df;
  padding-top: 80px;
  color: #ffffff;
  .center {
    width: 1200px;
    margin: 0 auto;
    .head {
      text-align: center;
      h1 {
        font-size: 48px;
        font-family: PingFang SC;
        font-weight: bold;
      }
      span {
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: bold;
      }
    }
    .body {
      display: flex;
      justify-content: space-between;
      padding-top: 40px;
      img {
        width: 283px;
        height: 182px;
      }
    }
  }
}
</style>
